<template>
<div>
  <el-table
      style="width:100%"
      v-loading="loading"
      element-loading-text="拼命加载中"
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
  >
    <el-table-column
        prop="peopleID"
        sortable
        label="编号">
      <template slot-scope="scope" >
        <label v-show="!scope.isEdit">{{scope.row.peopleID}}</label>
      </template>

    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名">
    </el-table-column>
    <el-table-column
        prop="old"
        sortable
        label="年龄">
    </el-table-column>
    <el-table-column
        prop="nation"
        label="民族">
    </el-table-column>
    <el-table-column
        prop="face"
        label="政治面貌">
    </el-table-column>
    <el-table-column
        prop="learn"
        label="文化程度">
    </el-table-column>
    <el-table-column
        prop="work"
        label="工作">
    </el-table-column>
    <el-table-column
        prop="comeTime"
        sortable
        label="入职日期">
    </el-table-column>
    <el-table-column
        prop="sex"
        label="性别">
    </el-table-column>
    <el-table-column
        prop="money"
        sortable
        label="工资">
    </el-table-column>
    <el-table-column
        prop="id"
        sortable
        label="部门ID">
    </el-table-column>
    <el-table-column
        prop="leaveDate"
        sortable
        label="离职日期">
    </el-table-column>
    <el-table-column>
      <template>

<!--        <el-button slot="reference" type="text" size="big">
          <i class="el-icon-delete"></i>
          </el-button>-->

      </template>

      <template slot-scope="scope">
        <el-popconfirm
            confirm-button-text='Yes'
            cancel-button-text='No'
            icon="el-icon-info"
            icon-color="red"
            title="您确定么？"
            @confirm="handleDelete(scope)"
        >
          <el-button slot="reference"  type="text" size="small">复职</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <div class=" good">
    <download-excel
        class = "export-excel-wrapper"
        :data   = "tableData"
        :fields = "json_fields"
        name = "离职人员表">
      <el-button @click="window.alert('good')" size="big" type="text"><i class="el-icon-delete"></i></el-button>
    </download-excel>
  </div>
</div>
</template>

<script>
import {DateTurn, HttpManager} from "@/api";

export default {
  name: "Tab3",
  data(){
    return {
      tableData:[],
      search:"",
      person:"",
      loading:true,
      json_fields:{
        "编号":'peopleID',
        "姓名":'name',
        '年龄,':'old',
        '民族':'nation',
        '政治面貌':'face',
        '文化程度':'learn',
        '工作':'work',
        '入职日期':'comeTime',
        '性别':'sex',
        '工资':'money',
        '部门ID':'id',
        '离职日期':'leaveDate'
      }
    }
  },
  methods:{
    handleDelete(scope){
      this.person  = new URLSearchParams();
      this.person.append("peopleID",scope.row.peopleID)
      HttpManager.deleteLeavePeople(this.person)
      HttpManager.getAllLeavePeople().then(
          (response)=>{
            for (let i = 0;i < response.length;i++) {
              //格式化日期的格式,不然会显示13位的数字
              response[i].leaveDate = DateTurn.timeToString(response[i].leaveDate)
              response[i].comeTime = DateTurn.timeToString(response[i].comeTime)
            }
            this.tableData = response
          }
      );
    }
  },
  mounted() {
    HttpManager.getAllLeavePeople().then(
        (response)=>{
          for (let i = 0;i < response.length;i++) {
            //格式化日期的格式,不然会显示13位的数字
            response[i].leaveDate = DateTurn.timeToString(response[i].leaveDate)
            response[i].comeTime = DateTurn.timeToString(response[i].comeTime)
          }
          this.tableData = response
        }
    );
  },
  updated() {
    this.loading = false
  }
}
</script>

<style scoped>
.good{
  position: absolute;
  top: 15px;
  right: 110px;
}
</style>
